﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <meta name="screen-orientation" content="portrait"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/m_ektz.css">
    <title>赛事排名</title>
    <style>
        .ranking-info {
            width:18rem;
            height:20rem;
            background:rgba(255,255,255,1);
            box-shadow:0rem 0rem 0rem rgba(149,50,86,0.43);
            border-radius:0.2rem;
            margin: 0 auto;
        }
        .ranking-info .ranking-img img{
            width: 5rem;
            top: -2.8rem;
            position: absolute;
            left: 6rem;
        }
        .ranking-info .ranking-content .ranking-area,.ranking-info .ranking-content .ranking-list{
            float: left;
            display: inline-block;
        }
        .ranking-info .ranking-content .ranking-area {
            width: 5rem;
            padding: 0 .5rem;
            border-right: .005rem solid #F394AB;
            height: 18rem;
            margin-top: 1rem;
        }
        .ranking-info .ranking-content .ranking-area li {
            height:1.2rem;
            margin-bottom: .5rem;
            font-family:PingFangSC-Medium;
            color:rgba(162,165,168,1);
            line-height:1.2rem;
        }
        .ranking-info .ranking-content .ranking-area li.active{
            color:#FE5D74;
        }
        .ranking-info .ranking-content .ranking-list {

        }
        .team-index,.team-info {
            display: inline-block;
            float: left;
        }
        .team-index {
            width: 1.5rem;
            font-size: .85rem;
            color: #FF9F00;
            height: 3.9rem;
            line-height: 3.9rem;
            text-align: center;
        }
        .ranking-list {
            margin-top: 1rem;
        }
        .ranking-list li {
            margin-left: .3rem;
        }
        .team-members li {
            margin: 0;
        }
        .team-info {
            padding-left: .5rem;
        }
        .team-info .team-name {
            font-size:.65rem;
            color: #666161;
        }
        .ranking-info .ranking-content .ranking-list li .team-item {
            height: 4.5rem;
            padding: .25rem;
            border-bottom: 0.05rem solid rgba(171,171,171,0.59);
        }
        .ranking-info .ranking-content .ranking-list li:last-child .team-item {
            border: none;
        }
        .ranking-info .ranking-content .ranking-list .team-item .team-index img {
            width: 1.5rem;
            height: 1.8rem;
        }
        .team-info .team-members ul li {
            display: inline-block;
        }
        .team-info .team-members img {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: .75rem;
            background-color: #D8D8D8;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="full-index-page">
        <header>
            <div class="logo">
                <img src="images/index/logo.png">
            </div>
            <div class="logo2">
                <img src="images/index/slogan.png">
            </div>
        </header>
        <div class="top-bar">
            <img src="images/index/top_bar.png">
        </div>
        <div class="index-body">
            <div class="ranking-info">
                <div class="ranking-top">
                    <div class="ranking-img">
                        <img src="images/ranking/icon_wawa.png">
                    </div>
                </div>
                <div class="ranking-content">
                    <div class="ranking-area">
                        <ul>
                            <script type="text/tmp" id="areaList">
                                <li data-match-id="{{:matchId}}">{{:value}}</li>
                            </script>
                        </ul>
                    </div>
                    <div class="ranking-list">
                        <ul style="height: 18rem;overflow-y: scroll;">
                            <li >
                                <div class="team-item">
                                    <div class="team-index">
                                        <img src="images/ranking/question_icon_1.png">
                                    </div>
                                    <div class="team-info">
                                        <div class="team-name">澳美第1队伍</div>
                                        <div class="team-members">
                                            <ul>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                            </ul>
                                        </div>
                                        <div class="team-solgan">口号口号口号</div>
                                    </div>
                                </div>
                            </li>
                            <li >
                                <div class="team-item">
                                    <div class="team-index">
                                        <img src="images/ranking/question_icon_2.png">
                                    </div>
                                    <div class="team-info">
                                        <div class="team-name">澳美第2队伍</div>
                                        <div class="team-members">
                                            <ul>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                            </ul>
                                        </div>
                                        <div class="team-solgan">口号口号口号</div>
                                    </div>
                                </div>
                            </li>
                            <li >
                                <div class="team-item">
                                    <div class="team-index">
                                        <img src="images/ranking/question_icon_3.png">
                                    </div>
                                    <div class="team-info">
                                        <div class="team-name">澳美第3队伍</div>
                                        <div class="team-members">
                                            <ul>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                            </ul>
                                        </div>
                                        <div class="team-solgan">口号口号口号</div>
                                    </div>
                                </div>
                            </li>
                            <li >
                                <div class="team-item">
                                    <div class="team-index">
                                        4
                                    </div>
                                    <div class="team-info">
                                        <div class="team-name">澳美第1队伍</div>
                                        <div class="team-members">
                                            <ul>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                            </ul>
                                        </div>
                                        <div class="team-solgan">口号口号口号</div>
                                    </div>
                                </div>
                            </li>
                            <li >
                                <div class="team-item">
                                    <div class="team-index">
                                        5
                                    </div>
                                    <div class="team-info">
                                        <div class="team-name">澳美第1队伍</div>
                                        <div class="team-members">
                                            <ul>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                                <li><img></li>
                                            </ul>
                                        </div>
                                        <div class="team-solgan">口号口号口号</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" style="margin-top: 0;">
            <img src="images/index/foot_banner.png">
        </div>
    </div>
</div>
</body>
<script src="js/rem.js"></script>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-mvalidate.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/api.js"></script>
<script src="js/action.js"></script>
<script src="js/jsrender.js"></script>
<script>Ranking.init()</script>
</html>